﻿@page "/tooltips"

<Block Title="Button 按钮" Introduction="常用的操作按钮。">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                    <BootstrapInput TItem="string" Value="@TopString">
                        <Tooltip Placement="Placement.Top" Title="Tootip" />
                    </BootstrapInput>
                </div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                    <BootstrapInput TItem="string" Value="@LeftString">
                        <Tooltip Placement="Placement.Left" Title="Tootip" />
                    </BootstrapInput>
                </div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                    <BootstrapInput TItem="string" Value="@BottomString">
                        <Tooltip Placement="Placement.Bottom" Title="Tootip" />
                    </BootstrapInput>
                </div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                    <BootstrapInput TItem="string" Value="@RightString">
                        <Tooltip Placement="Placement.Right" Title="Tootip" />
                    </BootstrapInput>
                </div>
            </div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Button Color="Color.Primary"&gt;主要按钮&lt;/Button&gt;
        </pre>
    </CodeTemplate>
</Block>

<AttributeTable Items="@GetAttributes()" />

@code {
    private string TopString => "Tooltip 在上方";

    private string LeftString => "Tooltip 在左方";

    private string RightString => "Tooltip 在右方";

    private string BottomString => "Tooltip 在下方";
}
